<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>小视频贩卖网</title>
  <!-- icon -->
  <link rel="stylesheet" href="/static/css/common/fonts/iconfont.css">
  <!-- logo图标 -->
  <link rel="icon" href="/static/favicon.ico" type="image/iconx">
  <!-- 消除浏览器差异 -->
  <link rel="stylesheet" href="/static/css/common/reset.css">
  <!-- 要写的CSS -->
  <link rel="stylesheet" href="/static/css/order.css">
  <link rel="stylesheet" href="/static/css/order-02.css">
</head>
<body>
  <div id="root" :style="{backgroundColor: !isSingnedin ? 'rgba(242, 242, 242, 1)' : '#fff'}">
    <!-- header -->
    <header class="header">
      <section class="left">
        <a href="/" style="color: #fff">
          <img src="/static/images/favicon.ico" class="logo">
          <span class="title">小视频贩卖网</span>
        </a>
      </section>

      <section class="tab">
        <div class="tab-item">
          <a href="/type?id=592c253d3a322270d55a0b9f" class="item">课程</a>
        </div>
        <div class="tab-item">
          <a href="javascript:;" class="item" @click="payFor">付费咨询</a>
        </div>
      </section>

      <section class="right">
        <a href="/order">
          <div class="shopcar">
            <i class="iconfont icon-gouwuche"></i>
            <span class="title">购物车</span>
          </div>
        </a>
        <div class="sign" v-if="!isSingnedin">
          <span class="signin"
            @click="signin">登录</span>
          <span class="signup"
            @click="signup">注册</span>
        </div>
        <div class="sign loging" v-if="isSingnedin">
          <div class="personal-wrapper">
            <img :src="_user.avatar" width="40" height="40">
          </div>
          <div class="information-wrapper">
            <div class="first">
              <div class="left-wrapper">
                <img :src="_user.avatar" width="75" height="75">
              </div>
              <div class="right-wrapper">
                <h3 class="name"><a href="/personal">{{ _user.username }}</a></h3>
              </div>
            </div>
            <div class="second">
              <div class="block-wrapper">
                <a href="/personal?type=course" class="shopcar">我的课程</a>
                <a href="/order" class="shopcar">我的订单</a>
                <a href="/personal" class="shopcar">个人设置</a>
              </div>
            </div>
            <div class="signout">
              <a :href="'/v1/api/user/logout/'+_user._id" class="out">安全退出</a>
            </div>
          </div>
        </div>
      </section>

      <section class="form-wrapper">
        <form action="" class="form-item">
          <div class="form-control">
            <input type="text" name="search" class="input-content">
            <button type="submit" class="submit">
              <i class="iconfont icon-sousuo-sousuo"></i>
            </button>
          </div>
        </form>
      </section>

    </header>

    <div class="order" v-if="isSingnedin">
      <div class="heading">
      </div>

      <div class="main-content">
        <h1 class="title">我的购物车
          <span class="selected">共 {{ allSum }} 门 </span>
          <!--<span class="selected">已选中 {{ shopcar | getsum }} 门</span>-->
        </h1>

        <div class="shopcar-wrapper">
          <div class="car-wrapper">
            <ul class="item-list" v-if="shopcar.length">
              <li class="first">
                <label class="selectall" for="selectall">
                  <input type="checkbox" name="selectall" v-model="selectall"> 全选
                </label>
                <span class="course">
                  课程
                </span>
                <span class="money">售价</span>
                <span class="control">操作</span>
              </li>
              <li class="item" v-for="(item, i) of shopcar">
                <label class="item-check">
                  <input type="checkbox" v-model="item.checked">
                </label>
                <div class="course">
                  <a :href="'/vedio?id=' + item._id">
                    <img :src="item.avatar" :alt="item.title" class="post" width="150" height="100">
                    <h3 class="title">{{ item.title }}</h3>
                  </a>
                </div>
                <div class="money">￥{{ item.money }}</div>
                <div class="control" @click="cancel(item._id)">ｘ</div>
              </li>
              <li class="end">
                <div class="sum-money">总金额: <span class="sum">￥{{ sumMoney }} 元</span></div>
                <div class="btn confirm-buy" @click="buyVedio">确认购买</div>
              </li>
            </ul>
            <div class="nothing" v-if="!shopcar.length">
              您的购物车空空如也:(
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="need-for-signin" v-if="!isSingnedin">
      <img src="/static/system/need-for-signin.png">
    </div>


    <footer class="footer">

      <div class="footer-wrapper">
        <div class="first-line">
          <a href="https://github.com/lastIndexOf" class="github">
            <i class="iconfont icon-github"></i>
          </a>
        </div>
        <div class="second-line">
          <a href="https://github.com/lastIndexOf/E-commerce.git" class="about-us">文档链接</a>
          <a href="javascript:;"
            class="about-us"
            @click="aboutUs">关于我们</a>
        </div>
        <div class="last-line">
          @made by 郑凡恺， 冯博， 章焕
        </div>
      </div>
    </footer>
    <div class="to-top"
      v-show="isShow"
      @click="toTop">
      <i class="iconfont icon-fanhuidingbu"></i>
    </div>

  </div>

  <script src="/static/js/bundles/order.js"></script>
</body>
</html>
